<template>
    <div class="flex_row flex_grow w100 h100" style="justify-content: space-between;">
        <div class="flex_col_start h100" style="overflow-y: scroll;">
            <ProjItem v-for="(item, index) in ctx.projs" :key="index" @detail="onClickDetail(item)"
                @delete="onDelete(item)" :proj="item" />
        </div>
        <div class="flex_col">
            <LoginParts />
            <CreateProjParts @created="onCreated" />
        </div>

        <div></div>
    </div>
</template>

<script lang="ts" setup>
import CreateProjParts from '@/components/CreateProjParts.vue';
import LoginParts from '@/components/LoginParts.vue';
import ProjItem from '@/components/ProjItem.vue';
import router from '@/router';
import { loadLogin } from '@/service/base';
import { deleteProj, queryProj, type TbProj } from '@/service/proj';
import { runAction } from '@/utils/ui';
import { reactive } from 'vue';

interface Ctx {
    projs: TbProj[],
}

const ctx = reactive<Ctx>({
    projs: []
})

async function init() {
    const items = await queryProj();
    ctx.projs = items;
}

async function onDelete(item: TbProj) {
    await runAction('删除', '', async () => {
        await deleteProj(item.id);
        await init();
    });
}

async function onClickDetail(item: TbProj) {
    router.push({
        path: '/firm_type',
        query: {
            proj_id: item.id,
            name: item.name
        }
    });
}

async function onCreated() {
    await runAction('更新', '项目列表', async () => {
        await init();
    });
}

init();
loadLogin();

</script>
